
<script setup>
import { ref, inject, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import Menus from "../components/Menus.vue";

const http = inject('$http'),
	store = inject('$store'),
	storage = inject('$storage');

const $user = store.state.user

let validateComPassword = ((rule, value, callback) => {
	if (value.trim().length == 0) {
		callback(new Error("确认密码不能为空"));
	} else if (value != repassModel.value.new) {
		callback(new Error("2次密码不一致"));
	} else {
		callback();
	}
})

let menuCollapseCache = storage.get('menuCollapse');
if (menuCollapseCache === null) menuCollapseCache = false;
let repassForm = ref(),
	repassing = ref(false),
	submitting = ref(false),
	menuCollapse = ref(menuCollapseCache),
	showRepassForm = ref(false),
	repassModel = ref({ old: '', new: '', com: '' }),
	repassRules = ref({
		old: [{ required: true, message: "请输入原密码", trigger: "blur" }],
		new: [{ required: true, message: "请输入新的密码", trigger: "blur" }],
		com: [{ validator: validateComPassword, trigger: "blur" }]
	});

watch(menuCollapse, (nv) => {
	storage.set('menuCollapse', nv)
})
let adminLoaded = computed(() => {
	return store.state.user.inited;
})
let menuSwithIcon = computed(() => {
	return menuCollapse.value ? 'indent' : 'outdent'
})
const userFunc = async function (command) {
	switch (command) {
		case 'changPwd':
			showRepassForm.value = true;
			break;
		case 'loginOut':
			store.dispatch('logout');
			break;
	}
}
const clearForm = function (done) {
	repassForm.value.resetFields()
	typeof done === 'function' && done();
}
const hideForm = function () {
	submitting.value = false;
	showRepassForm.value = false;
	clearForm();
}
const doRePass = function () {
	repassForm.value.validate(async (valid) => {
		if (!valid) return ElMessage({ type: 'error', message: '请确认表单信息已完善' });
		let res = await http.post('/update-password', repassModel.value)
		if (res && res.code === 200) {
			ElMessage({ type: "success", message: res.message });
			hideForm();
		}
	});
}

const watermarkTitle = computed(() => {
	return '公会赛-' + $user.info.realname
});

store.dispatch('validateLogin');
</script>
<template>
	<el-container class="page-body" style="height: 100vh">
		<el-aside style="width:auto;" :class="[menuCollapse ? 'collapse' : '']">
			<el-skeleton :loading="!adminLoaded" animated :class="['aside-skeleton', menuCollapse ? 'shrink ' : '']">
				<template #template>
					<el-skeleton-item v-for="key in [0, 1, 2]" :key="key" variant="text" class="menu-skeleton-item" />
				</template>
				<template #default>
					<el-watermark :content="[watermarkTitle, 'Aside Menu']" :font="{ color: 'rgba(228,241,3,.08)', fontSize: 15 }">
						<Menus :menus="$user.menus" :collapse="menuCollapse" />
					</el-watermark>
				</template>
			</el-skeleton>
		</el-aside>
		<el-container :class="['view-main', menuCollapse ? 'collapse' : '']">
			<el-header>
				<el-row justify="space-between">
					<el-col :span="20">
						<el-button size="small" type="info" @click="menuCollapse = !menuCollapse">
							<font-awesome-icon size="lg" :icon="'fa-solid fa-' + menuSwithIcon" />
						</el-button>
					</el-col>
					<el-col :span="4">
						<div class="nav-right-box">
							<el-skeleton class="header-skeleton" :loading="!adminLoaded" animated>
								<template #template>
									<el-skeleton-item variant="button" style="width:180px;height:33px;margin:14px 0;" />
								</template>
								<template #default>
									<el-dropdown @command="userFunc">
										<el-button :type="$user.info.isSuper ? 'danger' : 'primary'">
											<font-awesome-icon class="fa-icon" icon="fa-solid fa-user" />
											{{ $user.info.realname }}
										</el-button>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item command="changPwd">修改密码</el-dropdown-item>
												<el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</template>
							</el-skeleton>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-watermark :content="[watermarkTitle, 'Page View']" :font="{ color: 'rgba(0,0,0,.07)', fontSize: 16 }">
				<el-main class="page-view">
					<el-skeleton style="width: 100%" :loading="!adminLoaded" animated>
						<template #template>
							<el-skeleton-item variant="caption" style="display:block;height:calc(100vh - 100px)" />
						</template>
						<template #default>
							<router-view />
						</template>
					</el-skeleton>
				</el-main>
			</el-watermark>
		</el-container>
		<el-drawer title="修改密码" size="30%" v-model="showRepassForm" :wrapperClosable="false" direction="rtl"
			:before-close="clearForm">
			<template #default>
				<div style="padding: 10px">
					<el-form :rules="repassRules" ref="repassForm" label-position="right" label-width="80px"
						:model="repassModel">
						<el-form-item label="原密码" prop="old">
							<el-input type="password" v-model="repassModel.old" placeholder="请输入原密码" />
						</el-form-item>
						<el-form-item label="新密码" prop="new">
							<el-input type="password" v-model="repassModel.new" placeholder="请输入新的密码" />
						</el-form-item>
						<el-form-item label="确认密码" prop="com">
							<el-input type="password" v-model="repassModel.com" placeholder="确认新的登录密码" />
						</el-form-item>
					</el-form>
					<div class="form-buttons-container">
						<el-button @click="hideForm">取 消</el-button>
						<el-button type="primary" @click="doRePass()" :loading="repassing">
							{{ repassing ? "提交中 ..." : "保 存" }}
						</el-button>
					</div>
				</div>
			</template>
		</el-drawer>
	</el-container>
</template>

<style lang="scss" scoped>
.page-body {
	// font-family: "微软雅黑 Light";
	font-family: "微软雅黑";
	background-color: '#f4f4f4';

	.nav-right-box {
		height: 100%;
		display: flex;
		align-items: center;
	}
}
</style>